<template>
	<div>
		<typeGroup :name="data.name" @edit="showEdit()" @delete="deleteRow()">
			<div class="group-table-wp">
				<groupTableDetail ref="tableRef" :data="data" @change="changeData"></groupTableDetail>
			</div>
	  </typeGroup>

	  <el-dialog
	    v-model="dialog.visible"
	    width="1200px"
	    draggable>
	    <template #header>
	    	<div style="color: #fff">表格配置</div>
	    </template>
	   <div class="code-box">
			<el-tabs class="code-tabs" v-model="_d.tabKey" type="card">
				<el-tab-pane v-for="(item, index) in TABLE_TABS" 
					:key="item.key" 
					:label="item.label" 
					:name="item.key"></el-tab-pane>
			</el-tabs>
			<div class="code-content">
				<div v-if="currentTab.header" class="text t-header">{{currentTab.header}}</div>
				<div class="code-main" id="excelEditor"></div>
				<div v-if="currentTab.footer" class="text t-header">{{currentTab.footer}}</div>
			</div>
  	</div>
	    <template #footer>
	      <span class="dialog-footer">
	        <el-button @click="dialog.visible = false">关闭</el-button>
	        <el-button type="primary" @click="saveData()">确定</el-button>
	      </span>
	    </template>
	  </el-dialog>
	</div>
	  
</template>

<script setup>
	import { reactive, ref, computed, watch, onMounted } from 'vue'
	import typeGroup from "./type-group.vue";
	import groupTableDetail from "./group-table-detail.vue";
	import {TRANS_STYLE, TABLE_TABS} from "../components.js";

	const tableRef = ref();

	const emits = defineEmits(['delete', 'change']);
	const props = defineProps({
		data: {
			type: Object,
			default: () => ({})
		},
		index: {
			type: [String,Number],
			default: 0
		}
	})

	const _d = reactive({
		tabKey: 'table',
	})

	const dialog = reactive({
		visible: false,
		form: {
			tableCode: '',
			addCode: '',
			deleteCode: '',
			changeCode: '',
			saveCode: '',
		}
	})

	// 当前tab项
	const currentTab = computed(() => {
		return TABLE_TABS.find(item => item.key == _d.tabKey);
	})

	// // 切换Tab
	watch(() => _d.tabKey, (key, oldKey) => {
		// 保存当前的code
		saveTabcode(oldKey);
		// 切换为新的
		oAce.setValue(dialog.form[key+'Code']);
	})

	function showEdit() {
		dialog.form.tableCode = props.data.attr.tableCode;
		dialog.form.addCode = props.data.attr.addCode;
		dialog.form.deleteCode = props.data.attr.deleteCode;
		dialog.form.changeCode = props.data.attr.changeCode;
		dialog.form.saveCode = props.data.attr.saveCode;
		dialog.visible = true;
		setTimeout(() => {
			oAce.init();
			getData();
		}, 200);
	}

	function saveData() {
		saveTabcode(_d.tabKey);
		let data = JSON.parse(JSON.stringify(props.data));
		data.attr.tableCode = dialog.form.tableCode;
		data.attr.addCode = dialog.form.addCode;
		data.attr.deleteCode = dialog.form.deleteCode;
		data.attr.changeCode = dialog.form.changeCode;
		data.attr.saveCode = dialog.form.saveCode;
		emits('change', data);
		tableRef.value.init();
	}

	function deleteRow() {
		emits('delete');
	}

	function getData() {
		oAce.setValue(props.data.attr[_d.tabKey+'Code']);
	}

	// 保存tabcode
	function saveTabcode(tabKey) {
		dialog.form[tabKey+'Code'] = oAce.getValue();
	}

	// 改变数据
	function changeData(data) {
		emits('change', data);
	}

	// 编辑
  const oAce = {
    editor: null,
    timer: null,
    code: '',
    // 初始化Ace
    async init () {
      this.editor = ace.edit('excelEditor');
      // this.editor.session.setMode('ace/mode/javascript'); // 设置语言
      this.editor.setTheme('ace/theme/tomorrow'); // 设置主题
      this.editor.setOptions({
      	tabSize: 2,
        enableBasicAutocompletion: true,
        enableSnippets: true,
        // enableLiveAutocompletion: true// 设置自动提示
      })
    },
    // 设置ace-editor内容文本
    setValue (code) {
    	this.editor.setValue(code, -1);
    	// 跳到行末
    	var row = this.editor.session.getLength() - 1
			var column = this.editor.session.getLine(row).length // or simply Infinity
			this.editor.gotoLine(row + 1, column);
    },
    getValue () {
      return this.editor.getValue();
    }
  }
</script>

<style lang="scss" scoped>
.group-line-box {
	border: 1px dashed #dfdfdf;
	min-height: 1.5em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.code-box {
	position: relative;
	height: 600px;
	width: 100%;
	border: 1px solid #dfdfdf;
	background: #fff;
	display: flex;
	flex-direction: column;
	.do-btn {
		position: absolute;
		right: 10px;
		top: 8px;
		z-index: 2;
	}
	.code-tabs {
		:deep(.el-tabs__header) {
			margin-bottom: 0;
		}
	}
	.code-content {
		flex: 1;
		height: 0;
		display: flex;
		flex-direction: column;
		.text {
			padding-left: 30px;
			height: 30px;
			line-height: 30px;
			background: #F4F4F5;
			color: #999;
			font-size: 16px;
			font-family: Courier New;
		}
		.code-main {
			flex: 1;
			height: 0;
		}
	}
}
</style>